<template>
  <w-dialog class="f-dialog-preview" width="calc(100% - 100px)" height="calc(100% - 100px)" :ownproperty="true" :cover="true" :autoHide="true">
    <template v-if="data.type=='image'">
      <w-swiper ref="swiper" class="f-height" :current="current" :arrow="data.imgs.length > 1" :indicator-dots="data.imgs.length > 1" duration="300">
        <w-swiper-item v-for="(item,index) in data.imgs" :key="index">
          <div class="f-height f-rel f-oh">
            <img class="_img" :src="item" />
          </div>
        </w-swiper-item>
      </w-swiper>
      <div class=_rotate>
        <a class=_l @click="rot(-1)">{{loc.rotate_left}}</a>
        <span class=_s>|</span>
        <a class=_r @click="rot(1)">{{loc.rotate_right}}</a>
      </div>
    </template>
    <template v-else>
      <w-video class="f-height" :src="data.src"></w-video>
    </template>
    <div class="_dlg_x" @click="close"></div>
  </w-dialog>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    props: ['data'],
    data() {
      return {
        rotate: 0,
        current: $.lodash.get(this.data, 'options.current', 0),
      }
    },
    methods: {
      close() {
        $.close(this)
      },
      rot(a) {
        let r = this.rotate
        let b = $.bcr(this.$refs.swiper.el())
        let w = b.width - 40
        let h = b.height - 80
        if (a > 0) {
          r += 90
        } else if (a < 0) {
          r -= 90
        }
        let t = (r / 90) % 2
        $.q('.w-swiper-item.z-on ._img', this.$refs.swiper.el()).css({
          transform: 'rotate(' + r + 'deg)',
          maxWidth: t ? h : w,
          maxHeight: t ? w : h,
        });
        this.rotate = r
      }
    },
    computed: {
      loc() {
        return $.loc
      },
    },
    mounted() {
    
    }
  }
</script>

<style>

</style>
